import { Editor as WangMain, Toolbar as WangToolbar } from '@wangeditor/editor-for-vue';
import { h, VNode } from 'snabbdom';
import { Boot, DomEditor,SlateTransforms } from '@wangeditor/editor';

function withAttachment(editor) { // JS 语法
	const {
		isInline,
		isVoid
	} = editor
	const newEditor = editor

	newEditor.isInline = elem => {
		const type = DomEditor.getNodeType(elem)
		if(type === 'attachment') return false // 针对 type: attachment ，设置为 inline
		return isInline(elem)
	}

	newEditor.isVoid = elem => {
		const type = DomEditor.getNodeType(elem)
		if(type === 'attachment') return true // 针对 type: attachment ，设置为 void
		return isVoid(elem)
	}

	return newEditor // 返回 newEditor ，重要！！！
}

Boot.registerPlugin(withAttachment)

function renderAttachment(elem, children, editor) { // JS 语法
	// 获取“附件”的数据，参考上文 myResume 数据结构
	const {
		fileName = '', link = '',
			width = '100%', height = '200px',
	} = elem

	// 附件 icon 图标 vnode
	const iconVnode = h(
		'iframe',
		// HTML 属性驼峰式写法
		{
			props: {
				src: link,
				contentEditable: false,
				'data-w-e-type': 'attachment',
				dataLink: link,
				dataFileName: fileName,
			},
			style: {
				display: 'inline-block',
				width: width,
				height: height,
				border: '1px solid #ccc',
				outline: 'none',
			}
		}
		// 没有子节点，所以第三个参数不用写
	)

	// 附件元素 vnode
	const attachVnode = h(
		// HTML tag
		'div',
		// HTML 属性、样式、事件
		{
			props: {
				contentEditable: false,
				className: "w-e-textarea-video-container",
			}, // HTML 属性，驼峰式写法
			style: {

			}, // style ，驼峰式写法
			on: {
				click() {
					console.log(11)
				},
			}
		},
		// 子节点
		[iconVnode]
	)

	return attachVnode

}

const renderElemConf = {
	type: 'attachment', // 新元素 type ，重要！！！
	renderElem: renderAttachment,
}
Boot.registerRenderElem(renderElemConf)

function attachmentToHtml(elem, childrenHtml) { // JS 语法

	// 获取附件元素的数据
	const {
		link = '', fileName = '',
			width = '', height = '',
	} = elem

	// 生成 HTML 代码
	const html = `<iframe data-w-e-type="attachment" data-link="${link}" data-width="${width}" data-height="${height}" src="${link}" data-fileName="${fileName}" style="width:100%;height:200px;border:1px solid #ccc;outline:none;" data-w-e-is-void data-w-e-is-inline ></iframe>`

	return html
}

const elemToHtmlConf = {
	type: 'attachment', // 新元素的 type ，重要！！！
	elemToHtml: attachmentToHtml,
}

Boot.registerElemToHtml(elemToHtmlConf)

function parseAttachmentHtml(domElem, children, editor) { // JS 语法

	// 从 DOM element 中获取“附件”的信息
	const link = domElem.getAttribute('data-link') || ''
	const fileName = domElem.getAttribute('data-fileName') || ''
	const width = domElem.getAttribute('data-width') || ''
	const height = domElem.getAttribute('data-height') || ''

	// 生成“附件”元素（按照此前约定的数据结构）
	const myResume = {
		type: 'attachment',
		link,
		fileName,
		width,
		height,
		children: [{
			text: ''
		}], // void node 必须有 children ，其中有一个空字符串，重要！！！
	}

	return myResume
}
const parseHtmlConf = {
	selector: 'iframe[data-w-e-type="attachment"]', // CSS 选择器，匹配特定的 HTML 标签
	parseElemHtml: parseAttachmentHtml,
}
Boot.registerElemToHtml(parseHtmlConf)

class MyButtonMenu { // JS 语法

	constructor(editor) {
		this.title = '模型'
		this.tag = 'button'
		this.showModal = true
		this.modalWidth = 300
		this.modalHeight = 300
		this.targetEditor = editor; //修改为BtnMenu类的实例属性记录editor
	}

	// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
	isActive(editor) { // JS 语法
		return false
	}

	// 获取菜单执行时的 value ，用不到则返回空 字符串或 false
	getValue(editor) { // JS 语法
		return ''
	}

	// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
	isDisabled(editor) { // JS 语法
		return false
	}

	// 点击菜单时触发的函数
	exec(editor, value) { // JS 语法
		this.showModal = true
	}

	// 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
	getModalPositionNode(editor) { // JS 语法
		return null // modal 依据选区定位
	}

	// 定义 modal 内部的 DOM Element
	getModalContentElem(editor) { // JS 语法

		const $content = $('<div></div>')
		const $input = $("<input type='text' style='margin:15px 0;'/>")
		const $button1 = $("<button style='margin:15px 15px 15px 0;'>确定</button>")
		const $button2 = $("<button style='margin:15px 0;'>上传</button>")
		$content.append($input)
		$content.append($button1)
		$content.append($button2)

		$button1.on('click', () => {
			if($input.val()) {
				this.showModal = false
				editor.emit('upload3dNode',$input.val())
			}
		})
		$button2.on('click', () => {
			this.showModal = false
			editor.emit('upload3d')
		})

		return $content[0] // 返回 DOM Element 类型

		// PS：也可以把 $content 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能
	}
}

const myMenuConf = {
	key: 'upload3d',
	factory() {
		return new MyButtonMenu()
	}
}
Boot.registerMenu(myMenuConf)